<template>
  <div class="factory-page">
    <div class="factory-content">
      <!-- UE固定尺寸容器 -->
      <div class="ue-container">
        <iframe 
          :src="ueConfig.streamUrl" 
          class="ue-iframe"
          frameborder="0"
          allowfullscreen
        ></iframe>

        <!-- 顶部信息栏 -->
        <div class="top-info-bar">
          <div class="left-info">
            <div class="datetime">{{ currentDateTime }}</div>
          </div>
          <div class="center-title">
            <h1 class="main-title">智慧工厂</h1>
          </div>
          <div class="right-info">
            <div class="weather">晴 37℃ PM: 40 µg/m³</div>
          </div>
        </div>

        <!-- 左侧数据面板 -->
        <div class="left-panel">
          <!-- 设备统计 -->
          <div class="panel-section">
            <h3 class="section-title">设备统计</h3>
            <div class="equipment-stats">
              <div class="stat-item" v-for="(item, index) in equipmentStats" :key="index">
                <div class="stat-circle">
                  <div class="stat-number">{{ item.count }}</div>
                  <div class="stat-label">{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 指数统计 -->
          <div class="panel-section">
            <h3 class="section-title">指数统计</h3>
            <div class="index-stats">
              <div class="index-item" v-for="(item, index) in indexStats" :key="index">
                <div class="index-bar" :style="{ height: (item.value / 1000) * 100 + 'px' }"></div>
                <div class="index-value">{{ item.value }}</div>
                <div class="index-label">{{ item.name }}</div>
              </div>
            </div>
          </div>

          <!-- 设备状态 -->
          <div class="panel-section">
            <h3 class="section-title">设备状态</h3>
            <div class="device-status-list">
              <div class="device-item" v-for="(device, index) in deviceStatus" :key="index">
                <div class="device-name">{{ device.name }}</div>
                <div class="device-location">{{ device.location }}</div>
                <div class="device-status" :class="device.status"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧数据面板 -->
        <div class="right-panel">
          <!-- 视频监控 -->
          <div class="panel-section">
            <h3 class="section-title">视频监控</h3>
            <div class="video-grid">
              <div class="video-item" v-for="(video, index) in videoMonitors" :key="index">
                <img 
                  :src="`/factory_material/${index + 1}.png`" 
                  :alt="video.name"
                  class="video-image"
                />
                <div class="video-label">{{ video.name }}</div>
              </div>
            </div>
          </div>

          <!-- 环境监控 -->
          <div class="panel-section">
            <h3 class="section-title">环境监控</h3>
            <div class="environment-monitoring">
              <div class="env-item main" v-for="(env, index) in environmentData" :key="index" :class="{ 'top1': index === 0 }">
                <div class="env-circle">
                  <div class="env-value">{{ env.value }}</div>
                  <div class="env-label">{{ env.name }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 通用条形图 -->
          <div class="panel-section">
            <h3 class="section-title">数据统计</h3>
            <div class="bar-chart">
              <div class="bar-item" v-for="(bar, index) in barData" :key="index">
                <div class="bar-label">{{ bar.label }}</div>
                <div class="bar-container">
                  <div class="bar-fill" :style="{ width: (bar.value / 250) * 100 + '%' }"></div>
                </div>
                <div class="bar-value">{{ bar.value }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="bottom-nav">
          <div class="nav-item" v-for="(nav, index) in navItems" :key="index" :class="{ active: activeNav === index }">
            <div class="nav-icon"></div>
            <div class="nav-label">{{ nav.label }}</div>
          </div>
        </div>

        <!-- 加载状态 -->
        <div class="loading-overlay" v-if="loading">
          <a-spin size="large" />
          <div class="loading-text">{{ loadingText }}</div>
          <div class="loading-progress" v-if="loadingProgress > 0">
            <a-progress
              :percent="loadingProgress"
              size="small"
              :show-text="false"
              stroke-color="linear-gradient(90deg, #4facfe 0%, #00f2fe 100%)"
            />
            <div class="progress-text">
              {{ Math.round(loadingProgress) }}%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

// UE配置参数
const ueConfig = ref({
  // UE服务地址
  streamUrl: 'http://127.0.0.1:11188/video.html'
});

// 响应式状态
const loading = ref(false);
const loadingText = ref("加载中...");
const loadingProgress = ref(0);
const currentDateTime = ref('');
const activeNav = ref(0);

// 数据配置
const equipmentStats = ref([
  { name: '设备1', count: 5 },
  { name: '设备2', count: 3 },
  { name: '设备3', count: 12 },
  { name: '设备4', count: 4 }
]);

const indexStats = ref([
  { name: '数据1', value: 285 },
  { name: '数据2', value: 686 },
  { name: '数据3', value: 321 },
  { name: '数据4', value: 868 }
]);

const deviceStatus = ref([
  { name: '设备1', location: '位置1', status: 'online' },
  { name: '设备2', location: '位置2', status: 'online' },
  { name: '设备3', location: '位置3', status: 'online' },
  { name: '设备4', location: '位置4', status: 'online' }
]);

const videoMonitors = ref([
  { name: '视频监控1' },
  { name: '视频监控2' },
  { name: '视频监控3' },
  { name: '视频监控4' }
]);

const environmentData = ref([
  { name: '废气', value: 4530 },
  { name: '废水', value: 3780 },
  { name: '噪音', value: 2960 },
  { name: '湿度', value: 2140 },
  { name: '温度', value: 1560 }
]);

const barData = ref([
  { label: 'AAA', value: 200 },
  { label: 'AAA', value: 150 },
  { label: 'AAA', value: 180 },
  { label: 'AAA', value: 120 }
]);

const navItems = ref([
  { label: '综合概况' },
  { label: '设备参数' },
  { label: '历史数据' },
  { label: '告警信息' },
  { label: '系统设置' }
]);

// 更新时间
const updateDateTime = () => {
  const now = new Date();
  const options = { 
    year: 'numeric', 
    month: '2-digit', 
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    weekday: 'long'
  };
  currentDateTime.value = now.toLocaleString('zh-CN', options);
};

// 生命周期
onMounted(() => {
  console.log('未来工厂页面已加载，UE数据流iframe已就绪');
  console.log('UE配置:', ueConfig.value);
  
  updateDateTime();
  setInterval(updateDateTime, 1000);
});

onUnmounted(() => {
  console.log('未来工厂页面已卸载');
});
</script>

<style scoped>
/* 重置所有可能的margin和padding */
.factory-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.factory-page {
  width: 100%;
  height: 100%;
  background: #e3f2fd;
  color: #333;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

.factory-content {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* UE固定尺寸容器居中显示 */
  
}

.ue-container {
  width: 1920px;
  height: 1080px;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  transform: scale(min(calc(10vw / 1920), calc(10vh / 1080)));
  transform-origin: center center; 
  /* 强制保持16:9比例，自动适配容器 */
  aspect-ratio: 16 / 9;
}

.ue-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  object-fit: fill;
  /* 强制覆盖iframe样式，消除黑边 */
  transform: scale(1.05);
  transform-origin: center center;
}

.loading-overlay {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-text {
  margin-top: 16px;
  font-size: 16px;
  color: #4facfe;
  font-weight: 500;
}

.loading-progress {
  width: 200px;
  margin-top: 16px;
}

.progress-text {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #4facfe;
}

/* 叠加UI样式 */
.top-info-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 10;
  border-bottom: 2px solid #00f2fe;
}

.left-info, .right-info {
  color: #00f2fe;
  font-size: 16px;
  font-weight: 500;
}

.center-title {
  flex: 1;
  text-align: center;
}

.main-title {
  color: #00f2fe;
  font-size: 32px;
  font-weight: bold;
  margin: 0;
  text-shadow: 0 0 20px #00f2fe;
  letter-spacing: 2px;
}

.left-panel, .right-panel {
  position: absolute;
  top: 100px;
  width: 300px;
  height: calc(100% - 130px); /* 增加高度：从180px改为140px */
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 8px;
  padding: 15px;
  z-index: 5;
}

.left-panel {
  left: 20px;
  overflow-y: auto; /* 只有左侧面板有滚动条 */
}

.right-panel {
  right: 20px;
}

.panel-section {
  margin-bottom: 20px; /* 减少间距 */
}

.section-title {
  color: #00f2fe;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px 0;
  text-align: center;
  border-bottom: 1px solid rgba(0, 242, 254, 0.3);
  padding-bottom: 10px;
}

/* 设备统计 */
.equipment-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.stat-item {
  text-align: center;
}

.stat-circle {
  width: 80px;
  height: 80px;
  border: 2px solid #00f2fe;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  background: rgba(0, 242, 254, 0.1);
}

.stat-number {
  color: #00f2fe;
  font-size: 24px;
  font-weight: bold;
}

.stat-label {
  color: #fff;
  font-size: 12px;
}

/* 指数统计 */
.index-stats {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 120px;
}

.index-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index-bar {
  width: 20px;
  background: linear-gradient(to top, #00f2fe, #4facfe);
  border-radius: 2px;
  margin-bottom: 10px;
  min-height: 10px;
}

.index-value {
  color: #00f2fe;
  font-size: 14px;
  font-weight: bold;
}

.index-label {
  color: #fff;
  font-size: 12px;
}

/* 设备状态 */
.device-status-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: rgba(0, 242, 254, 0.1);
  border-radius: 4px;
}

.device-name {
  color: #fff;
  font-size: 14px;
}

.device-location {
  color: #00f2fe;
  font-size: 12px;
}

.device-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff00;
}

/* 视频监控 */
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.video-item {
  aspect-ratio: 16/9;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #00f2fe;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.video-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.video-label {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  color: #00f2fe;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 5px;
  border-radius: 2px;
  text-align: center;
}

/* 环境监控 */
.environment-monitoring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.env-item {
  text-align: center;
}

.env-item.top1 {
  order: -1;
  flex-basis: 100%;
}

.env-circle {
  width: 60px;
  height: 60px;
  border: 2px solid #00f2fe;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 242, 254, 0.1);
  margin: 0 auto 5px;
}

.env-item.top1 .env-circle {
  width: 80px;
  height: 80px;
}

.env-value {
  color: #00f2fe;
  font-size: 14px;
  font-weight: bold;
}

.env-item.top1 .env-value {
  font-size: 18px;
}

.env-label {
  color: #fff;
  font-size: 10px;
}

/* 条形图 */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-label {
  color: #fff;
  font-size: 12px;
  width: 30px;
}

.bar-container {
  flex: 1;
  height: 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.bar-value {
  color: #00f2fe;
  font-size: 12px;
  width: 30px;
  text-align: right;
}

/* 底部导航 */
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  padding: 20px;
  z-index: 10;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-item.active .nav-icon {
  background: #00f2fe;
  box-shadow: 0 0 20px #00f2fe;
}

.nav-icon {
  width: 60px;
  height: 60px;
  border: 2px solid #00f2fe;
  border-radius: 50%;
  background: rgba(0, 242, 254, 0.1);
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.nav-label {
  color: #00f2fe;
  font-size: 20px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1920px) {
  .ue-container {
    transform: scale(calc(100vw / 1920));
    transform-origin: center center;
  }
}

@media (max-height: 1080px) {
  .ue-container {
    transform: scale(calc(100vh / 1080));
    transform-origin: center center;
  }
}

@media (max-width: 1920px) and (max-height: 1080px) {
  .ue-container {
    transform: scale(min(calc(100vw / 1920), calc(100vh / 1080)));
    transform-origin: center center;
  }
}
</style>

